/* eslint-disable semi */
/* eslint-disable semi */
/* eslint-disable quotes */
<template>
  <div>

    <van-tabs v-model="active" color=#37CD87 title-active-color=#37CD87>
      <van-tab title="火腿">

        <div class="hello-1" v-for="(item, index) in middleimages" :key="index">
          <van-image class="hello-1-img" width="3.2rem" height="1.893rem" :src="item.imgSrc" />
          <p>没有更多了</p>

        </div>

      </van-tab>

    </van-tabs>

    <Tab-Bar :logeid="num"></Tab-Bar>
  </div>
</template>

<script>
import TabBar from "./TabBar.vue";
export default {
  components: {
    TabBar
  },
  data() {
    return {
      num: 3,
      active: 0,
      middleimages: [{ id: 0, imgSrc: require("../assets/images/none.png") }]
    };
  },
  mounted: function() {
    //初始化页面自执行轻提示框
    this.addtoast();
  },
  methods: {
    addtoast() {
      const toast = this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "加载中..."
      });

      let second = 1;
      const timer = setInterval(() => {
        second--;
        if (second) {
          toast.message = `加载中...`;
        } else {
          clearInterval(timer);
          // 手动清除 Toast
          toast.clear();
        }
      }, 1000);
    }
  }
};
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
body {
  background-color: #f6f6f6;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin: 0;
  display: block;
}
div {
  display: block;
  box-sizing: border-box;
}

.hello-1 {
  width: 100%;
  height: 600px;
  background: #f6f6f6;
}
.hello-1 p {
  margin-top: 25px;
  color: #969799;
  font-size: 14px;
}
.hello-1-img {
  margin-top: 35px;
  margin-left: 131px;

  border-radius: 10px;
  pointer-events: none;
}

#app {
  margin-top: 0px;
}
</style>

